<template>
  <div>
    <el-dialog
      v-model="state.forgetPasswordDialog"
      title="忘记密码"
      width="30%"
      @close="cancel"
    >
      <el-form
        ref="forgetPasswordForm"
        :label-position="labelPostion"
        :model="loginData"
        :rules="loginDataRules"
      >
        <el-form-item label="账号" placeholder="请输入注册账号" prop="account">
          <el-input v-model="loginData.account" />
        </el-form-item>
        <el-form-item label="邮箱" placeholder="请输入注册邮箱" prop="email">
          <el-input v-model="loginData.email" />
        </el-form-item>
      </el-form>
      <!-- 底部内容 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="cancel">取消</el-button>
          <el-button type="primary" @click="nextStep">下一步</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改密码弹窗 -->
    <el-dialog
      v-model="state.changePasswordDialog"
      title="修改密码"
      width="30%"
      @close="cancel2"
    >
      <el-form
        ref="changPasswordRef"
        :label-position="labelPostion"
        :model="loginData"
        :rules="loginDataRules"
      >
        <el-form-item
          label="密码"
          placeholder="请输入您的新密码"
          prop="password"
        >
          <el-input v-model="loginData.password" />
        </el-form-item>
        <el-form-item
          label="确认密码"
          placeholder="请再次输入您的新密码"
          prop="repassword"
        >
          <el-input v-model="loginData.repassword" />
        </el-form-item>
      </el-form>
      <!-- 底部内容 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="cancel2">取消</el-button>
          <el-button type="primary" @click="btnOk">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue'
import { verify, reset } from '@/api/login'
import { ElMessage } from 'element-plus'

const labelPostion = ref('top')
const forgetPasswordForm = ref(null)
const changPasswordRef = ref(null)
interface loginData {
  account: number
  email: string
  password: string
  repassword: string
}
let loginData: loginData = reactive({
  account: null,
  email: '',
  password: '',
  repassword: '',
})
interface loginDataRules {
  account: object
  email: object
  password: object
  repassword: object
}
const resetData = () => {
  loginData = reactive({
    account: null,
    email: '',
    password: '',
    repassword: '',
  })
}
const validRePassWord = (rule: any, value: any, callback: any) => {
  if (value !== loginData.password) {
    callback(new Error('两次密码输入不一致'))
  } else {
    callback()
  }
}
const loginDataRules = reactive<loginDataRules>({
  account: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
  email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
  repassword: [
    { required: true, message: '确认密码不能为空', trigger: 'blur' },
    { validator: validRePassWord, trigger: 'blur' },
  ],
})
const state = reactive({
  forgetPasswordDialog: false,
  changePasswordDialog: false,
})
const cancel = () => {
  state.forgetPasswordDialog = false
  forgetPasswordForm.value.clearValidate()
}
const cancel2 = () => {
  state.changePasswordDialog = false
  resetData()
  changPasswordRef.value.clearValidate()
}
const open = () => {
  state.forgetPasswordDialog = true
}
// 下一步
let id = ref(null)
const nextStep = () => {
  forgetPasswordForm.value.validate(async (valid, fields) => {
    if (valid) {
      const res = await verify(loginData)
      if (res.status !== 0) return ElMessage.error('账号或邮箱不正确，请重试')
      if (res.status === 0 && res.id) {
        id = res.id
        // 存储id
        sessionStorage.setItem('id', res.id)
        state.changePasswordDialog = true
        state.forgetPasswordDialog = false
        resetData()
        forgetPasswordForm.value.clearValidate()
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 更改密码
const btnOk = async () => {
  console.log(loginData)
  changPasswordRef.value.validate(async (valid, fields) => {
    if (valid) {
      const res = await reset(id, loginData.password)
      if (res.status === 0 && res.message === '更新成功') {
        ElMessage({
          message: '更新密码成功',
          type: 'success',
        })
        state.changePasswordDialog = false
        resetData()
        changPasswordRef.value.clearValidate()
      } else {
        return ElMessage.error('更新失败')
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
defineExpose({
  open,
})
</script>

<style lang="scss" scoped>
</style>